import React, { Component } from 'react'
import { NavBar,Input,Button,Divider,Toast } from 'antd-mobile'
import './index.less';
import qq from './images/qq.png';
import wechat from './images/wechat.png';
import github from './images/github.png';
import axios from 'axios';

export default class Login extends Component {
    state = {
        phone: '', //存储手机号
        code: '', //存储验证码
    }

    render() {
        return (
            <div className="login-container">
                {/* 顶部导航 start */}
                <NavBar back={null}>手机验证码登录</NavBar>
                {/* 顶部导航 end */}

                {/* 表单区域 start */}
                <div className="form">
                    {/* 手机号 */}
                    <div className="phone">
                    <Input
                        placeholder='请输入手机号'
                        value={this.state.phone}
                        clearable
                        name="phone"
                        onChange={this.saveData('phone')}
                        />
                    </div>
                    {/* 验证码 */}
                    <div className="code">
                        <Input
                        placeholder='请输入验证码'
                        value={this.state.code}
                        clearable
                        name="code"
                        onChange={this.saveData('code')}
                        />
                        <Button onClick={this.sendCode}>获取验证码</Button>
                    </div>
                    <div className="button">
                        <Button block color="danger" onClick={this.login}>登录</Button>
                    </div>
                </div>
                {/* 表单区域 end */}

                {/* 其他登录方式 start */}
                <div className="other-login">
                    <div className="line">
                        <Divider>其他登录方式</Divider>
                    </div>
                    <div className="sf">
                        <a href="http://localhost:5000/login/github"><img src={github} alt="" /></a>
                        <img src={qq} alt="" />
                        <img src={wechat} alt="" />
                    </div>
                </div>
                {/* 其他登录方式 end */}

                {/* 文字提示 start */}
                <p className="zc">
                    未注册的手机号, 验证后会自动创建硅谷账号, 登录即代表您同意 《硅谷隐私政策》
                </p>
                {/* 文字提示 end */}

            </div>
        )
    }

    //登录
    login = async () => {
        //获取手机号和验证码
        let {phone, code} = this.state;

        //检查数据的格式
        let reg = /^1\d{10}$/;
        //验证
        if(!reg.test(phone)){
            Toast.show({
                icon: 'fail',
                content: '手机号格式错误',
              })
            return;
        }
        //验证码格式检测
        let reg2 = /^\d{6}$/;
        if(!reg2.test(code)){
            Toast.show({
                icon: 'fail',
                content: '验证码格式错误',
              })
            return;
        }

        console.log(2222);
        //发送请求
        let result = await axios.post('/login/phone', {
            phone, code
        });

        //成功与失败的判断
        if(result.data.code === 20000){
            Toast.show({
                icon: 'success',
                content: '登录成功',
            });
            //编程式路由导航
            this.props.history.push('/usercenter');

        }else{
            Toast.show({
                icon: 'fail',
                content: result.data.message,
              })
        }

    }

    //发送验证码
    sendCode = async () => {
        //获取手机号
        let {phone} = this.state;

        //验证手机号是否合法
        let reg = /^1\d{10}$/;
        //验证
        if(!reg.test(phone)){
            Toast.show({
                icon: 'fail',
                content: '手机号格式错误',
              })
            return;
        }
        //发送AJAX请求, 发送验证码
        let result = await axios.post('/login/digits', {phone});

        if(result.data.code === 20000){
            Toast.show({
                icon: 'success',
                content: '发送成功',
              })
        }else{
            Toast.show({
                icon: 'fail',
                content: '发送失败, 请稍后再试...',
              })
        }
    }

    //在 antd-mobile 中, 事件对象 e 不再是事件对象,  而是事件源的值
    saveData = (name) => {
        return (v) => {
            //修改 state 中的值
            this.setState({
                [name]: v
            })
        }
    }
}
